<template>
  <div class="page-container" v-global-loading="loading" ref="pageContainerRef">
    <div class="page-card-container">
      <a-form :model="pageSet" layout="inline">
        <a-form-item label="产品名称、别名、规格型号">
          <a-input
            v-model:value="pageSet.productName"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="产品编码">
          <a-input
            v-model:value="pageSet.productCode"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="商品分类">
          <a-tree-select
            v-model:value="pageSet.productTypeId"
            show-search
            style="width: 200px"
            :dropdown-style="{maxHeight: '400px', overflow: 'auto'}"
            allow-clear
            tree-default-expand-all
            :tree-data="treeData"
            tree-node-filter-prop="name"
            :fieldNames="{value: 'id', label: 'name'}"
            @change="changeTree"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="运营位类型">
          <a-select
            v-model:value="pageSet.positionConfigId"
            style="width: 200px"
            :filter-option="filterOption"
            show-search
          >
            <a-select-option
              :value="item.id"
              :title="item.positionName"
              v-for="item in recommendType"
              >{{ item.positionName }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="商品标签">
          <a-select
            v-model:value="pageSet.TagsIds"
            style="width: 200px"
            :filter-option="filterOption"
            show-search
          >
            <a-select-option
              :value="item.id"
              :title="item.name"
              v-for="item in tagsList"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="发布状态">
          <a-select v-model:value="pageSet.publishStatus" style="width: 100px">
            <a-select-option :value="1">上架</a-select-option>
            <a-select-option :value="2">下架</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-warning" @click="loadPagination(true)">
            查询
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="reset">重置</div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="compile2(1)">批量上架</div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="compile2(2)">批量下架</div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="compile(7, 1)">
            批量修改商品分类
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="compile(2, 1)">
            批量修改商品运营位类型
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="compile(3, 1)">
            批量修改商品税率
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="compile(16, 1)">
            批量修改商品单位
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="compile(14, 1)">
            导入商品别名
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="compile(18, 1)">
            导出上架商品
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-danger" @click="synchronization(1)">
            同步商品信息
          </div>
        </a-form-item>
      </a-form>

      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
        row-key="id"
        :row-selection="{
          selectedRowKeys: selectedRowKeysList,
          onChange: onSelectChange,
          preserveSelectedRowKeys: true
        }"
        :scroll="{
          x: 1200,
          y: useAppStore.pageCommonInfo.canUseHeight - 36 + 'px'
        }"
      >
        <template #bodyCell="{text, record, index, column}">
          <template v-if="column.title == '产品名称'">
            <a-tooltip>
              <template #title>{{ text }}</template>
              <div class="font-left nowrap">{{ text }}</div>
            </a-tooltip>
          </template>
          <template v-if="column.title == '产品图片'">
            <div
              class="pointer"
              v-if="
                record.productDetailImgDtos &&
                record.productDetailImgDtos.length &&
                record.productDetailImgDtos[0].imgUrl
              "
              @click="
                () => {
                  setVisible(true, index);
                }
              "
            >
              <img
                :src="record.productDetailImgDtos[0].imgUrl"
                alt=""
                style="height: 30px"
              />
              <a-image
                :width="0"
                :style="{display: 'none'}"
                :preview="{
                  visible: visibleImg[index],
                  onVisibleChange: (e) => {
                    setVisible(e, index);
                  }
                }"
                :src="record.productDetailImgDtos[0].imgUrl"
              />
            </div>
          </template>
          <template v-if="column.title == '别名'">
            <a-tooltip>
              <template #title>{{ text }}</template>
              <div class="font-left nowrap">{{ text }}</div>
            </a-tooltip>
          </template>
          <template v-if="column.title == '规格型号'">
            <a-tooltip>
              <template #title>{{ text }}</template>
              <div class="font-left nowrap">{{ text }}</div>
            </a-tooltip>
          </template>
          <template v-if="column.title == '操作'">
            <div style="display: flex; justify-content: space-between">
              <div>
                <span class="pointer c-primaryColor" @click="compile(1, record)"
                  >查看</span
                >
                <span class="pointer c-primaryColor" @click="compile(6, record)"
                  >&nbsp;&nbsp;&nbsp;{{
                    record.publishStatus == 1 ? "下架" : "上架"
                  }}</span
                >
              </div>
              <a-dropdown>
                <span class="pointer">更多<more-outlined /></span>

                <template #overlay>
                  <a-menu>
                    <a-menu-item key="1">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(4, record)"
                      >
                        商品别名
                      </div>
                    </a-menu-item>
                    <a-menu-item key="2">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(5, record)"
                      >
                        商品标签
                      </div>
                    </a-menu-item>
                    <a-menu-item key="3">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(8, record)"
                      >
                        商品参数
                      </div>
                    </a-menu-item>
                    <a-menu-item key="4">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(9, record)"
                      >
                        商品轮播图
                      </div>
                    </a-menu-item>
                    <a-menu-item key="5">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(10, record)"
                      >
                        商品详情图
                      </div>
                    </a-menu-item>
                    <a-menu-item key="6">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(11, record)"
                      >
                        商品随机配件
                      </div>
                    </a-menu-item>
                    <a-menu-item key="7">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(12, record)"
                      >
                        商品特点
                      </div>
                    </a-menu-item>
                    <a-menu-item key="8">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(13, record)"
                      >
                        关联商品
                      </div>
                    </a-menu-item>
                    <a-menu-item key="9">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(15, record)"
                      >
                        一起购买商品
                      </div>
                    </a-menu-item>
                    <a-menu-item key="10">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(2, record)"
                      >
                        运营位类型
                      </div>
                    </a-menu-item>
                    <a-menu-item key="11">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(3, record)"
                      >
                        商品税率
                      </div>
                    </a-menu-item>
                    <a-menu-item key="12">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(7, record)"
                      >
                        商品分类
                      </div>
                    </a-menu-item>
                    <a-menu-item key="13">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(16, record)"
                      >
                        商品单位
                      </div>
                    </a-menu-item>
                    <a-menu-item key="14">
                      <div
                        class="pointer c-primaryColor"
                        @click="compile(17, record)"
                      >
                        商品名称
                      </div>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </template>
        </template>
      </a-table>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
      <!-- 详情 -->
      <a-modal
        v-model:open="visible"
        width="800px"
        :title="title"
        :footer="null"
        :maskClosable="false"
      >
        <a-form :labelCol="{span: 6}" :model="form" ref="formRef">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="产品名称" name="productName">
                <a-input v-model:value="form.productName" />
              </a-form-item>
              <a-form-item label="产品编码" name="productCode">
                <a-input v-model:value="form.productCode" />
              </a-form-item>
              <a-form-item label="规格型号" name="spec">
                <a-input v-model:value="form.spec" />
              </a-form-item>
              <a-form-item label="品牌" name="brand">
                <a-input v-model:value="form.brand" />
              </a-form-item>
              <a-form-item label="主计量单位" name="measureUnit">
                <a-input v-model:value="form.measureUnit" />
              </a-form-item>
              <a-form-item label="装箱规格" name="packingSpec">
                <a-input v-model:value="form.packingSpec" />
              </a-form-item>
              <!-- <a-form-item label="装箱标准" name="packingStandard">
                <a-input v-model:value="form.packingStandard" />
              </a-form-item> -->
              <a-form-item label="类别编码" name="sapProductTypeCode">
                <a-input v-model:value="form.sapProductTypeCode" />
              </a-form-item>
              <a-form-item label="初始含税单价" name="originalTaxPrice">
                <a-input v-model:value="form.originalTaxPrice">
                  <template #suffix> 元 </template>
                </a-input>
              </a-form-item>
              <a-form-item label="含税单价" name="taxPrice">
                <a-input v-model:value="form.taxPrice">
                  <template #suffix> 元 </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="商品详情" name="content">
                <a-input v-model:value="form.content" />
              </a-form-item>
              <a-form-item label="商品描述" name="description">
                <a-input v-model:value="form.description" />
              </a-form-item>
              <a-form-item label="税率" name="taxRate">
                <a-input v-model:value="form.taxRate">
                  <template #suffix> % </template>
                </a-input>
              </a-form-item>
              <a-form-item label="别名" name="ncName">
                <a-input v-model:value="form.ncName" />
              </a-form-item>
              <a-form-item label="标签" name="tagsName">
                <a-input v-model:value="form.tagsName" />
              </a-form-item>
              <a-form-item label="类别名称" name="sapProductTypeName">
                <a-input v-model:value="form.sapProductTypeName" />
              </a-form-item>
              <!-- <a-form-item label="装箱标准" name="packingStandardI">
                <a-input v-model:value="form.packingStandardI" />
              </a-form-item> -->
              <!-- <a-form-item label="是否同步" name="isSync">
                  <a-input v-model:value="form.isSync" />
                </a-form-item>
                <a-form-item label="上架状态" name="publishStatus">
                  <a-input v-model:value="form.publishStatus" />
                </a-form-item>
                <a-form-item label="商品分类" name="productTypeId">
                  <a-input v-model:value="form.productTypeId" /> -->
              <!-- </a-form-item> -->
              <a-form-item label="运营位类型" name="positionConfigIds">
                <a-select
                  v-model:value="form.positionConfigIds"
                  style="width: 270px"
                  :filter-option="filterOption"
                  show-search
                  mode="multiple"
                >
                  <a-select-option
                    :value="item.id"
                    :title="item.positionName"
                    v-for="item in recommendType"
                    >{{ item.positionName }}</a-select-option
                  >
                </a-select>
              </a-form-item>
              <a-form-item label="同步时间" name="syncDate">
                <a-input v-model:value="form.syncDate" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>
      <!-- 运营类型 -->
      <a-modal
        v-model:open="visible1"
        width="500px"
        title="运营位类型"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form-item label="运营位类型" name="recommendType">
            <a-select
              v-model:value="form.recommendType"
              style="width: 270px"
              :filter-option="filterOption"
              show-search
              mode="multiple"
              @change="changeRecommend"
            >
              <a-select-option
                :value="item.id"
                :title="item.positionName"
                v-for="(item, index) in recommendType"
                :disabled="
                  isOperationIndex1 != index &&
                  item.positionType == 4 &&
                  isOperation
                "
              >
                {{ item.positionName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="限时优惠折扣%" name="discount" v-if="isOperation">
            <a-input-number
              v-model:value="form.discount"
              :min="0"
              :max="100"
            ></a-input-number>
          </a-form-item>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(1, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(1, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 商品税率 -->
      <a-modal
        v-model:open="visible2"
        width="500px"
        title="商品税率"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form-item label="税率" name="taxRate" :labelCol="{span: 4}">
            <a-input-number
              min="0"
              style="width: 100%"
              v-model:value="form.taxRate"
              addon-after="%"
            />
          </a-form-item>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(2, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(2, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 商品别名 -->
      <a-modal
        v-model:open="visible3"
        width="500px"
        title="商品别名"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <div
            style="
              display: flex;
              justify-content: end;
              margin-top: -10px;
              margin-bottom: 4px;
            "
          >
            <a-button type="primary" @click="deleName(1, false)">添加</a-button>
          </div>
          <div style="display: flex; margin-bottom: 10px">
            <span style="height: 34px; line-height: 34px; margin-right: 6px"
              >商品别名：</span
            >
            <div>
              <div
                v-for="(item, index) in nameList"
                style="margin-bottom: 10px"
              >
                <a-input v-model:value="nameList[index]" style="width: 300px" />
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span
                  style="color: red"
                  class="pointer"
                  @click="deleName(index, true)"
                  >删除</span
                >
              </div>
            </div>
          </div>

          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(3, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(3, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 商品分类 -->
      <a-modal
        v-model:open="visible4"
        width="500px"
        title="商品分类"
        :footer="null"
        :maskClosable="false"
        :destroyOnClose="true"
        @cancel="submit(5, false)"
      >
        <div v-global-loading="modalloading">
          <a-form-item label="商品分类名称" name="productTypeId">
            <a-tree-select
              v-model:value="form.productTypeId"
              show-search
              :dropdown-style="{maxHeight: '400px', overflow: 'auto'}"
              allow-clear
              tree-default-expand-all
              :tree-data="treeData"
              :fieldNames="{value: 'id', label: 'name'}"
              @change="changeTree"
              tree-node-filter-prop="name"
            >
            </a-tree-select>
          </a-form-item>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(5, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(5, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 选择标签 -->
      <SelectLabel
        ref="selectLabelRef"
        v-model:list="tagList"
        :type="2"
        @ok="submit(4, true)"
      ></SelectLabel>
      <!-- 商品SkU -->
      <a-modal
        v-model:open="visible5"
        width="600px"
        title="商品参数"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <div style="display: flex; justify-content: end; margin-bottom: 10px">
            <a-button type="primary" @click="addSku(true)">新增</a-button>
          </div>
          <a-table
            size="small"
            :dataSource="tableDataSku"
            :columns="columnsSku"
            bordered
            :pagination="false"
          >
            <template #bodyCell="{index, text, record, column}">
              <template v-if="column.title == '属性名称'">
                <a-input
                  v-model:value="tableDataSku[index].paramName"
                  style="width: 180px"
                ></a-input>
              </template>
              <template v-if="column.title == '属性值'">
                <a-input
                  v-model:value="tableDataSku[index].paramValue"
                  style="width: 180px"
                ></a-input>
              </template>
              <template v-if="column.title == '操作'">
                <span
                  class="pointer"
                  style="color: red"
                  @click="addSku(false, index)"
                  >删除</span
                >
              </template>
            </template>
          </a-table>
          <div style="display: flex; justify-content: end; margin-top: 10px">
            <a-button style="margin-right: 14px" @click="submit(6, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(6, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 商品轮播图 -->
      <a-modal
        v-model:open="visible6"
        width="628px"
        title="商品轮播图"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <div style="display: flex; flex-wrap: wrap">
            <div
              v-for="(item, index) in slideshowData"
              style="
                margin: 0 6px 10px 6px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              "
            >
              <div style="border: 2px solid rgb(216, 210, 210)">
                <a-image :width="100" :src="item.imgUrl" />
              </div>
              <div
                style="
                  border: 1px solid rgb(202, 193, 193);
                  margin-top: 2px;
                  display: flex;
                  border-radius: 4px;
                  justify-content: space-between;
                  height: 24px;
                  line-height: 24px;
                  box-sizing: border-box;
                "
              >
                <div style="display: flex">
                  <div
                    style="
                      border-right: 1px solid rgb(202, 193, 193);
                      cursor: pointer;
                    "
                    @click="adjustment(1, index)"
                  >
                    <BackwardFilled style="font-size: 20px; color: #000" />
                  </div>
                  <div
                    style="
                      border-right: 1px solid rgb(202, 193, 193);
                      cursor: pointer;
                    "
                    @click="adjustment(2, index)"
                  >
                    <ForwardFilled style="font-size: 20px; color: #000" />
                  </div>
                </div>
                <div
                  style="
                    border-left: 1px solid rgb(202, 193, 193);
                    cursor: pointer;
                  "
                  @click="adjustment(3, index)"
                >
                  <DeleteOutlined style="font-size: 16px; color: red" />
                </div>
              </div>
            </div>
            <div
              style="
                width: 100px;
                height: 100px;
                border: 1px solid rgb(211, 211, 211);
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
              "
              @click="upload('slideshowData')"
            >
              <CloudUploadOutlined
                style="color: rgb(214, 208, 208); font-size: 60px"
              />
            </div>
          </div>
          <div style="display: flex; justify-content: end; margin-top: 10px">
            <a-button style="margin-right: 14px" @click="submit(7, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(7, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 商品详情图 -->
      <a-modal
        v-model:open="visible7"
        width="628px"
        title="商品详情图"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <div style="display: flex; flex-wrap: wrap">
            <div
              v-for="(item, index) in detailPicture"
              style="
                margin: 0 6px 10px 6px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              "
            >
              <div style="border: 2px solid rgb(216, 210, 210)">
                <a-image :width="100" :src="item.imgUrl" />
              </div>
              <div
                style="
                  border: 1px solid rgb(202, 193, 193);
                  margin-top: 2px;
                  display: flex;
                  border-radius: 4px;
                  justify-content: space-between;
                  height: 24px;
                  line-height: 24px;
                  box-sizing: border-box;
                "
              >
                <div style="display: flex">
                  <div
                    style="
                      border-right: 1px solid rgb(202, 193, 193);
                      cursor: pointer;
                    "
                    @click="detailAdjustment(1, index)"
                  >
                    <BackwardFilled style="font-size: 20px; color: #000" />
                  </div>
                  <div
                    style="
                      border-right: 1px solid rgb(202, 193, 193);
                      cursor: pointer;
                    "
                    @click="detailAdjustment(2, index)"
                  >
                    <ForwardFilled style="font-size: 20px; color: #000" />
                  </div>
                </div>
                <div
                  style="
                    border-left: 1px solid rgb(202, 193, 193);
                    cursor: pointer;
                  "
                  @click="detailAdjustment(3, index)"
                >
                  <DeleteOutlined style="font-size: 16px; color: red" />
                </div>
              </div>
            </div>
            <div
              style="
                width: 100px;
                height: 100px;
                border: 1px solid rgb(211, 211, 211);
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
              "
              @click="upload('detailPicture')"
            >
              <CloudUploadOutlined
                style="color: rgb(214, 208, 208); font-size: 60px"
              />
            </div>
          </div>
          <div style="display: flex; justify-content: end; margin-top: 10px">
            <a-button style="margin-right: 14px" @click="submit(8, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(8, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 随机配件 -->
      <a-modal
        v-model:open="visible8"
        width="500px"
        title="随机配件"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <div style="display: flex; justify-content: end">
            <a-button type="primary" @click="randomAdd(1)">添加</a-button>
          </div>
          <div
            style="
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              margin-bottom: 10px;
            "
          >
            <div v-for="(item, index) in randomFittingsData">
              <a-input
                v-model:value="randomFittingsData[index]"
                style="width: 200px; margin-top: 10px"
              />
              <span style="cursor: pointer" @click="randomDele(1, index)"
                >&nbsp;
                <DeleteOutlined style="font-size: 16px; color: red" />
              </span>
            </div>
          </div>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(9, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(9, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 商品特点 -->
      <a-modal
        v-model:open="visible9"
        width="500px"
        title="商品特点"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <div style="display: flex; justify-content: end">
            <a-button type="primary" @click="randomAdd(2)">添加</a-button>
          </div>
          <div
            style="
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              margin-bottom: 10px;
            "
          >
            <div v-for="(item, index) in productTraitData">
              <a-input
                v-model:value="productTraitData[index]"
                style="width: 200px; margin-top: 10px"
              />
              <span style="cursor: pointer" @click="randomDele(2, index)"
                >&nbsp;
                <DeleteOutlined style="font-size: 16px; color: red" />
              </span>
            </div>
          </div>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(10, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(10, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 关联商品 -->
      <a-modal
        v-model:open="visible10"
        width="1000px"
        :centered="true"
        title="请选择关联商品"
        :footer="null"
        :maskClosable="false"
        :destroyOnClose="true"
      >
        <div v-global-loading="modalloading">
          <UserGradeChoose
            v-model:list="relatedGoods.linkProducts"
            v-model:detail="relatedGoods.linkProductsDetail"
            :flagDetail="true"
            :presentId="relatedGoods.id"
          ></UserGradeChoose>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(11, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(11, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 一起购买的商品 -->
      <a-modal
        v-model:open="visible12"
        width="1000px"
        title="设置经常一起购买的商品"
        :footer="null"
        :centered="true"
        :maskClosable="false"
        :destroyOnClose="true"
      >
        <div v-global-loading="modalloading">
          <UserGradeChoose
            v-model:list="associated.matchingProducts"
            v-model:detail="associated.matchingProductsDetail"
            :flagDetail="true"
            :presentId="associated.id"
          ></UserGradeChoose>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(13, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(13, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 导入别名 -->
      <a-modal
        v-model:open="visible11"
        width="500px"
        title="导入商品别名"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form :labelCol="{span: 6}">
            <a-form-item label="下载导入模板">
              <a
                href="https://kacunchu001.obs.cn-east-3.myhuaweicloud.com/dongcheng/file/%E5%95%86%E5%93%81%E5%88%AB%E5%90%8D%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF1700029622769ifhukptg.xls"
                >点击下载导入模板</a
              >
            </a-form-item>
            <a-form-item label="直接上传">
              <div style="display: flex; line-height: 30px; flex-wrap: wrap">
                <span style="width: 250px">{{ importData.name }}</span>
                <div
                  class="commonBtn-primary"
                  @click="importfun"
                  style="min-width: 90px"
                >
                  文件上传
                </div>
              </div>
            </a-form-item>
          </a-form>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(12, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(12, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 商品单位 -->
      <a-modal
        v-model:open="visible13"
        width="500px"
        title="修改商品单位"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form-item label="主计量单位" name="measureUnit">
            <a-input v-model:value="form.measureUnit" />
          </a-form-item>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(14, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(14, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 商品同步 -->
      <a-modal
        v-model:open="visible14"
        width="500px"
        title="商品数据同步"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form-item label="选择同步日期">
            <a-range-picker
              v-model:value="syncDate"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              :disabled="[false, true]"
            />
          </a-form-item>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="visible14 = false"
              >取消</a-button
            >
            <a-button type="primary" @click="synchronization(2)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 修改商品名称 -->
      <a-modal
        v-model:open="visible15"
        width="500px"
        title="修改商品名称"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form-item label="商品名称" name="productName">
            <a-input v-model:value="productName.productName" />
          </a-form-item>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="submit(15, false)"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(15, true)">确定</a-button>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  inject,
  onActivated,
  onMounted,
  watch,
  getCurrentInstance
} from "vue";
import {
  trigerUpload,
  trigerUploadObs,
  trigerUploadMuch,
  uploadMuchUrl,
  exportData
} from "@/utils/common";
import {tagsInfoList} from "@/api/customerArchives/memberTag";
import {
  productInfoPage,
  productInfoDetail,
  productInfoList,
  productInfoUpdatePublishStatus,
  productInfoUpdate,
  productInfoUpdateRecommendType,
  productInfoUpdatePrice,
  productInfoSetNcName,
  productInfoSetTag,
  productInfoUpdateSkuValue,
  productInfoUpdateImgUrls,
  productInfoUpdateDetailUrls,
  productInfoSetTrait,
  productInfoSetFittings,
  productInfoSetLinkProduct,
  productInfoSetImportNcName,
  settMatchingProducts,
  getLimitedtimeOffer,
  updateMeasureUnit,
  getIncrementProductInfo,
  productInfoUpdateName,
  productInfoExportProduct
} from "@/api//merchandise/commodity";
import {hotwordinfoList} from "@/api/merchandise/hotWord";
import dayjs from "dayjs";
import {
  positionConfigPage,
  positionConfigList
} from "@/api/merchandise/operatingSystem";
import UserGradeChoose from "@/components/functional/userGradeChoose.vue";
import {productTypeList} from "@/api/merchandise/classification";
import SelectLabel from "@/components/functional/selectLabel.vue";
import Pagination from "@/components/pagination/Pagination.vue";
import useAppStore from "@/store/app";
import {message, Modal} from "ant-design-vue";
//获取标签列表
const tagsList = ref([]);
const getTags = () => {
  tagsInfoList({tagType: 2}).then((res) => {
    tagsList.value = res.data;
  });
};
getTags();
const CurrentInstance: any = getCurrentInstance();
const syncDate: any = ref([null, null]);
//同步商品信息
const synchronization = (type) => {
  if (type == 1) {
    //弹窗
    visible14.value = true;
    syncDate.value = [null, dayjs().format("YYYY-MM-DD")];
  } else {
    //同步
    if (syncDate.value[0] && syncDate.value[1]) {
      // message.warning('同步中时间可能会较长请等待')
      modalloading.value = true;
      getIncrementProductInfo({
        startTime: syncDate.value[0],
        endTime: syncDate.value[1]
      })
        .then(() => {
          // CurrentInstance.proxy.$emitter.emit('sync')
          message.success("同步成功");
          loadPagination(true);
        })
        .finally(() => {
          modalloading.value = false;
          visible14.value = false;
        });
    } else {
      message.error("请选择同步时间");
    }
  }
};
const productName: any = ref({});
const pageContainerRef = ref();
const visibleImg = ref<any>([]);
const setVisible = (flag, index) => {
  visibleImg.value[index] = flag;
};
const filterOption = (input: string, option: any) => {
  return option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
//运营位是否已选择限时优惠 有的话禁用
const isOperation = ref(false);
const isOperationIndex1 = ref(0);
//选择运营位调整参数
const changeRecommend = () => {
  isOperation.value = false;
  form.value.positions = [];
  form.value.discount = form.value.discount ? form.value.discount : 0;
  recommendType.value.forEach((item, i) => {
    form.value.recommendType.forEach((v) => {
      if (item.id == v) {
        form.value.positions.push({
          positinId: v,
          positionType: item.positionType,
          discount: 0
        });
        if (item.positionType == 4) {
          isOperation.value = true;
          isOperationIndex1.value = i;
        }
      }
    });
  });
};
async function affirm(data, name) {
  modalloading.value = true;
  let dataObj: any = await uploadMuchUrl(data);
  message.success("上传成功");
  if (name == "slideshowData") {
    dataObj.urlList.forEach((item) => {
      slideshowData.value.push({imgUrl: item});
    });
  } else if (name == "detailPicture") {
    dataObj.urlList.forEach((item) => {
      detailPicture.value.push({imgUrl: item});
    });
  }
  modalloading.value = false;
}
const upload = (name: string): void => {
  trigerUploadMuch().then((res: any) => {
    let files = res.target.files;
    for (let index = 0; index < files.length; index++) {
      if (
        files[index].type != "image/jpeg" &&
        files[index].type != "image/png" &&
        files[index].type != "image/jpg"
      ) {
        return message.error("请上传jpeg、png、jpg类型的图片");
      }
    }
    affirm(res.target.files, name);
  });
};
const selectedRowKeysList = ref([]);
function onSelectChange(selectedRowKeys) {
  selectedRowKeysList.value = selectedRowKeys;
}
const calcCanUseHeight: any = inject("calcCanUseHeight");
onActivated(() => {
  calcCanUseHeight();
});
onMounted(() => {
  calcCanUseHeight();
});
//商品ID
const productId = ref();
const changeTree = (a, b) => {
  form.value.productTypeName = b[0];
};
const treeData = ref([]);
const gettreeData = () => {
  productTypeList().then((res) => {
    treeData.value = res.data;
  });
};
gettreeData();
//别名集合
const nameList = ref<Array<string>>([]);
const deleName = (index, flag) => {
  if (flag) {
    nameList.value.splice(index, 1);
  } else {
    nameList.value.push("");
  }
};
const selectLabelRef = ref();
const title = ref("详情");
const form: any = ref({});
const modalloading = ref(false);
const tableLoading = ref<boolean>(false);
const loading = ref<boolean>(false);
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0
});
const visible = ref(false);
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
const visible5 = ref(false);
const visible6 = ref(false);
const visible7 = ref(false);
const visible8 = ref(false);
const visible9 = ref(false);
const visible10 = ref(false);
const visible11 = ref(false);
const visible12 = ref(false);
const visible13 = ref(false);
const visible14 = ref(false);
const visible15 = ref(false);
//批量操作
const compile2 = (type) => {
  if (selectedRowKeysList.value.length) {
    let title1 = type == 1 ? "上架" : "下架";
    Modal.confirm({
      title: "提示",
      content: `确定要${title1}这批商品吗`,
      onOk() {
        useAppStore.loading = true;
        let selectedStr = selectedRowKeysList.value.join(",");
        productInfoUpdatePublishStatus({
          productIds: selectedStr,
          publishStatus: type
        })
          .then((res) => {
            message.success("操作成功!");
            selectedRowKeysList.value = [];
            loadPagination();
          })
          .finally(() => {
            useAppStore.loading = false;
          });
      }
    });
  } else {
    message.error("请选择需要操作的商品!");
  }
};
const importData = ref<any>({});
const importfun = () => {
  trigerUpload().then((res: any) => {
    let files = res.target.files[0];
    if (
      files.type ==
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
      files.type == "application/vnd.ms-excel"
    ) {
      let formData = new FormData();
      formData.append("file", files);
      importData.value = {
        file: formData,
        name: files.name
      };
    } else {
      message.error("请上传xls、xslx类型的文件！");
    }
  });
};
//提交
const submit = (type, flag) => {
  if (flag) {
    if (type == 1) {
      //运营
      if (form.value.id) {
        form.value.positions.forEach((item) => {
          if (item.positionType == 4) {
            item.discount = form.value.discount;
          }
        });
        modalloading.value = true;
        productInfoUpdateRecommendType({
          productIds: form.value.id,
          positions: form.value.positions
        })
          .then(() => {
            message.success("编辑成功!");
            visible1.value = false;
            selectedRowKeysList.value = [];
            loadPagination();
          })
          .finally(() => {
            modalloading.value = false;
          });
      } else {
        if (selectedRowKeysList.value.length > 0) {
          form.value.positions.forEach((item) => {
            if (item.positionType == 4) {
              item.discount = form.value.discount;
            }
          });
          modalloading.value = true;
          productInfoUpdateRecommendType({
            productIds: selectedRowKeysList.value.join(","),
            positions: form.value.positions
          })
            .then(() => {
              message.success("编辑成功!");
              visible1.value = false;
              selectedRowKeysList.value = [];
              loadPagination();
            })
            .finally(() => {
              modalloading.value = false;
            });
        } else {
          message.error("请选择需要操作的项!");
        }
      }
    } else if (type == 2) {
      //税率
      if (form.value.id) {
        modalloading.value = true;
        productInfoUpdatePrice({
          productIds: form.value.id,
          taxRate: form.value.taxRate
        })
          .then(() => {
            message.success("编辑成功!");
            visible2.value = false;
            selectedRowKeysList.value = [];
            loadPagination();
          })
          .finally(() => {
            modalloading.value = false;
          });
      } else {
        if (selectedRowKeysList.value.length > 0) {
          modalloading.value = true;
          productInfoUpdatePrice({
            productIds: selectedRowKeysList.value.join(","),
            taxRate: form.value.taxRate
          })
            .then(() => {
              message.success("编辑成功!");
              visible2.value = false;
              selectedRowKeysList.value = [];
              loadPagination();
            })
            .finally(() => {
              modalloading.value = false;
            });
        } else {
          message.error("请选择需要操作的项!");
        }
      }
    } else if (type == 3) {
      let list: any = [];
      nameList.value.forEach((item) => {
        if (item) {
          list.push(item);
        }
      });
      //别名
      modalloading.value = true;
      productInfoSetNcName({
        productId: form.value.id,
        ncName: list.join("、")
      })
        .then(() => {
          message.success("编辑成功!");
          visible3.value = false;
          loadPagination();
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else if (type == 4) {
      //标签
      selectLabelRef.value.modalloading = true;
      // let tagIdStr = tagList.value.join(",");
      let tagIdStr = JSON.parse(JSON.stringify(tagList.value));
      productInfoSetTag({productId: form.value.id, tagsIds: tagIdStr})
        .then((res) => {
          message.success("设置成功");
          selectLabelRef.value.nodeModal();
          loadPagination();
        })
        .finally(() => {
          selectLabelRef.value.modalloading = false;
        });
    } else if (type == 5) {
      //商品分类
      if (form.value.id) {
        modalloading.value = true;
        productInfoUpdate({
          productIds: form.value.id,
          productTypeId: form.value.productTypeId,
          productTypeName: form.value.productTypeName
        })
          .then(() => {
            message.success("编辑成功!");
            visible4.value = false;
            selectedRowKeysList.value = [];
            loadPagination();
          })
          .finally(() => {
            modalloading.value = false;
          });
      } else {
        if (selectedRowKeysList.value.length > 0) {
          modalloading.value = true;
          productInfoUpdate({
            productIds: selectedRowKeysList.value.join(","),
            productTypeId: form.value.productTypeId,
            productTypeName: form.value.productTypeName
          })
            .then(() => {
              message.success("编辑成功!");
              visible4.value = false;
              selectedRowKeysList.value = [];
              loadPagination();
            })
            .finally(() => {
              modalloading.value = false;
            });
        } else {
          message.error("请选择需要操作的项!");
        }
      }
    } else if (type == 6) {
      //SKU设置
      modalloading.value = true;
      productInfoUpdateSkuValue({
        productId: productId.value,
        producttParamDtos: tableDataSku.value
      })
        .then(() => {
          message.success("设置成功");
          loadPagination();
          visible5.value = false;
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else if (type == 7) {
      //轮播图设置
      modalloading.value = true;
      productInfoUpdateImgUrls({
        productId: productId.value,
        productLBImgDtos: slideshowData.value
      })
        .then(() => {
          message.success("设置成功");
          loadPagination();
          visible6.value = false;
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else if (type == 8) {
      //详情图设置
      modalloading.value = true;
      productInfoUpdateDetailUrls({
        productId: productId.value,
        productDetailImgDtos: detailPicture.value
      })
        .then(() => {
          message.success("设置成功");
          loadPagination();
          visible7.value = false;
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else if (type == 9) {
      //提交商品配件
      modalloading.value = true;
      let data = randomFittingsData.value.filter((item) => {
        return item;
      });
      productInfoSetFittings({
        productId: productId.value,
        randomFittings: data.join(",")
      })
        .then((res) => {
          message.success("配置成功");
          visible8.value = false;
          loadPagination();
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else if (type == 10) {
      //提交商品特点
      //productInfoSetTrait
      modalloading.value = true;
      let data = productTraitData.value.filter((item) => {
        return item;
      });
      productInfoSetTrait({
        productId: productId.value,
        productTrait: data.join(",")
      })
        .then((res) => {
          message.success("配置成功");
          visible9.value = false;
          loadPagination();
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else if (type == 11) {
      //关联商品
      modalloading.value = true;
      let ids = relatedGoods.value.linkProducts.join(",");
      productInfoSetLinkProduct({id: relatedGoods.value.id, linkProducts: ids})
        .then(() => {
          message.success("设置成功!");
          visible10.value = false;
          loadPagination();
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else if (type == 12) {
      //导入商品别名
      if (importData.value.file) {
        modalloading.value = true;
        productInfoSetImportNcName(importData.value.file)
          .then(() => {
            message.success("导入成功!");
            visible11.value = false;
            loadPagination();
          })
          .finally(() => {
            modalloading.value = false;
          });
      } else {
        message.error("请上传文件!");
      }
    } else if (type == 13) {
      // 一起购买的商品
      modalloading.value = true;
      let ids = associated.value.matchingProducts.join(",");
      settMatchingProducts({id: associated.value.id, matchingProducts: ids})
        .then(() => {
          message.success("设置成功!");
          visible12.value = false;
          loadPagination();
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else if (type == 14) {
      //商品单位
      if (form.value.id) {
        modalloading.value = true;
        updateMeasureUnit({
          productIds: form.value.id,
          measureUnit: form.value.measureUnit
        })
          .then(() => {
            message.success("编辑成功!");
            visible13.value = false;
            selectedRowKeysList.value = [];
            loadPagination();
          })
          .finally(() => {
            modalloading.value = false;
          });
      } else {
        if (selectedRowKeysList.value.length > 0) {
          modalloading.value = true;
          updateMeasureUnit({
            productIds: selectedRowKeysList.value.join(","),
            measureUnit: form.value.measureUnit
          })
            .then(() => {
              message.success("编辑成功!");
              visible13.value = false;
              selectedRowKeysList.value = [];
              loadPagination();
            })
            .finally(() => {
              modalloading.value = false;
            });
        } else {
          message.error("请选择需要操作的项!");
        }
      }
    } else if (type == 15) {
      //商品名称修改
      modalloading.value = true;
      productInfoUpdateName(productName.value)
        .then(() => {
          message.success("编辑成功");
          visible15.value = false;
          loadPagination();
        })
        .finally(() => {
          modalloading.value = false;
        });
    }
  } else {
    visible1.value = false;
    visible2.value = false;
    visible3.value = false;
    visible4.value = false;
    visible5.value = false;
    visible6.value = false;
    visible7.value = false;
    visible8.value = false;
    visible9.value = false;
    visible10.value = false;
    visible11.value = false;
    visible12.value = false;
    visible13.value = false;
    visible15.value = false;
  }
};
//随机配件数据
const randomFittingsData = ref<Array<any>>([]);
//产品特点数据
const productTraitData = ref<Array<any>>([]);
const randomAdd = (type) => {
  if (type == 1) {
    //添加配件
    randomFittingsData.value.push("");
  } else if (type == 2) {
    //添加特点
    productTraitData.value.push("");
  }
};
const randomDele = (type, index) => {
  if (type == 1) {
    //删除配件
    randomFittingsData.value.splice(index, 1);
  } else if (type == 2) {
    //删除特点
    productTraitData.value.splice(index, 1);
  }
};
//是否是批量操作
const isBatch = ref(false);
//关联商品
const relatedGoods = ref<any>({});
//一起购买的商品
const associated = ref<any>({});
//操作
const compile = (type: number, data: any) => {
  if (type == 1) {
    //查看
    useAppStore.loading = true;
    productInfoDetail({id: data.id})
      .then((res) => {
        form.value = res.data;
        form.value.positionConfigIds = form.value.positionConfigIds
          ? form.value.positionConfigIds
          : [];
        visible.value = true;
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 2) {
    //运用位类型
    if (data == 1) {
      //批量操作
      if (selectedRowKeysList.value.length) {
        isOperation.value = false;
        form.value = {positions: []};
        visible1.value = true;
      } else {
        message.error("请选择需要操作的商品!");
      }
    } else {
      //单个操作
      useAppStore.loading = true;
      isOperation.value = false;
      productInfoDetail({id: data.id})
        .then((res) => {
          form.value = res.data;
          form.value.positions = [];
          isOperation.value = false;
          form.value.discount = 0;
          let ids = form.value.positionConfigIds || [];
          form.value.recommendType = form.value.positionConfigIds || [];
          ids.forEach((item) => {
            recommendType.value.forEach((v, index) => {
              if (item == v.id) {
                form.value.positions.push({
                  positinId: v.id,
                  positionType: v.positionType,
                  discount: 0
                });
                if (v.positionType == 4) {
                  isOperation.value = true;
                  isOperationIndex1.value = index;
                }
              }
            });
          });

          if (isOperation.value) {
            getLimitedtimeOffer({productId: data.id})
              .then((res) => {
                form.value.discount = res.data.discount;
              })
              .finally(() => {
                useAppStore.loading = false;
              });
          } else {
            useAppStore.loading = false;
          }
          visible1.value = true;
        })
        .catch(() => {
          useAppStore.loading = false;
        });
    }
  } else if (type == 3) {
    //商品税率
    if (data == 1) {
      if (selectedRowKeysList.value.length) {
        form.value = {};
        visible2.value = true;
      } else {
        message.error("请选择需要操作的商品!");
      }
    } else {
      useAppStore.loading = true;
      productInfoDetail({id: data.id})
        .then((res) => {
          form.value = res.data;
          visible2.value = true;
        })
        .finally(() => {
          useAppStore.loading = false;
        });
    }
  } else if (type == 4) {
    //商品别名
    useAppStore.loading = true;
    productInfoDetail({id: data.id})
      .then((res) => {
        form.value = res.data;
        try {
          nameList.value = form.value.ncName.split("、");
        } catch {
          nameList.value = [""];
        }
        visible3.value = true;
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 5) {
    //商品标签
    useAppStore.loading = true;
    productInfoDetail({id: data.id})
      .then((res) => {
        form.value = res.data;
        // try {
        //   tagList.value = res.data.tagsIds.split(",");
        // } catch {
        //   tagList.value = [];
        // }
        tagList.value = res.data.tagsIds || [];
        selectLabelRef.value.showModal();
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 6) {
    let title = data.publishStatus == 1 ? "下架" : "上架";
    let state = data.publishStatus == 1 ? 2 : 1;
    Modal.confirm({
      title: "提示",
      content: `确定要${title}该商品吗`,
      onOk() {
        useAppStore.loading = true;
        productInfoUpdatePublishStatus({
          productIds: data.id,
          publishStatus: state
        })
          .then((res) => {
            message.success(title + "成功"!);
            loadPagination();
          })
          .finally(() => {
            useAppStore.loading = false;
          });
      }
    });
  } else if (type == 7) {
    //商品分类
    if (data == 1) {
      if (selectedRowKeysList.value.length) {
        form.value = {};
        visible4.value = true;
      } else {
        message.error("请选择需要操作的商品!");
      }
    } else {
      useAppStore.loading = true;
      productInfoDetail({id: data.id})
        .then((res) => {
          form.value = res.data;
          visible4.value = true;
        })
        .finally(() => {
          useAppStore.loading = false;
        });
    }
  } else if (type == 8) {
    //商品SKU
    useAppStore.loading = true;
    productId.value = data.id;
    productInfoDetail({id: data.id})
      .then((res) => {
        tableDataSku.value = res.data.producttParamDtos || [];
        visible5.value = true;
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 9) {
    //商品轮播图
    useAppStore.loading = true;
    productId.value = data.id;
    productInfoDetail({id: data.id})
      .then((res) => {
        slideshowData.value = res.data.productLBImgDtos || [];
        visible6.value = true;
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 10) {
    //商品详情图
    useAppStore.loading = true;
    productId.value = data.id;
    productInfoDetail({id: data.id})
      .then((res) => {
        detailPicture.value = res.data.productDetailImgDtos || [];
        visible7.value = true;
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 11) {
    //随机配件
    useAppStore.loading = true;
    productInfoDetail({id: data.id})
      .then((res) => {
        productId.value = data.id;
        try {
          randomFittingsData.value = res.data.randomFittings.split(",");
        } catch {
          randomFittingsData.value = [""];
        }
        visible8.value = true;
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 12) {
    //产品特点
    useAppStore.loading = true;
    productInfoDetail({id: data.id})
      .then((res) => {
        productId.value = data.id;
        try {
          productTraitData.value = res.data.productTrait.split(",");
        } catch {
          productTraitData.value = [""];
        }
        visible9.value = true;
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 13) {
    //关联商品
    useAppStore.loading = true;
    productInfoDetail({id: data.id})
      .then((res) => {
        relatedGoods.value.id = data.id;
        try {
          relatedGoods.value.linkProducts =
            res.data.linkProducts.split(",") || [];
          relatedGoods.value.linkProductsDetail =
            res.data.linkProductInfos || [];
        } catch {
          relatedGoods.value.linkProducts = [];
          relatedGoods.value.linkProductsDetail = [];
        }
        visible10.value = true;
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 14) {
    //导入商品别名
    importData.value = {};
    visible11.value = true;
  } else if (type == 15) {
    useAppStore.loading = true;
    productInfoDetail({id: data.id})
      .then((res) => {
        associated.value.id = data.id;
        try {
          associated.value.matchingProducts =
            res.data.matchingProducts.split(",") || [];
          associated.value.matchingProductsDetail =
            res.data.matchingProductInfos || [];
        } catch {
          associated.value.matchingProducts = [];
          associated.value.matchingProductsDetail = [];
        }
        visible12.value = true;
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 16) {
    if (data == 1) {
      if (selectedRowKeysList.value.length) {
        form.value = {};
        visible13.value = true;
      } else {
        message.error("请选择需要操作的商品!");
      }
    } else {
      useAppStore.loading = true;
      productInfoDetail({id: data.id})
        .then((res) => {
          form.value = res.data;
          visible13.value = true;
        })
        .finally(() => {
          useAppStore.loading = false;
        });
    }
  } else if (type == 17) {
    useAppStore.loading = true;
    productInfoDetail({id: data.id})
      .then((res) => {
        productName.value = {
          productId: res.data.id,
          productName: res.data.productName
        };
        visible15.value = true;
      })
      .finally(() => {
        useAppStore.loading = false;
      });
  } else if (type == 18) {
    //导出上架商品
    loading.value = true;
    productInfoExportProduct()
      .then((res) => {
        exportData(res, "已上架商品");
      })
      .finally(() => {
        loading.value = false;
      });
  }
};
const tagList = ref([]);
//获取数据
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableLoading.value = true;
  productInfoPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination(true);
//运营位类型
const recommendType = ref<any>([
  // {type: 1, name: "精品分类"},
  // {type: 2, name: "推荐"},
  // {type: 3, name: "普通"},
  // {type: 4, name: "热销"},
  // {type: 5, name: "其他相关产品"},
  // {type: 6, name: "礼品精选"},
  // {type: 7, name: "限时优惠"}
]);
const getHotwordinfoList = () => {
  positionConfigList().then((res) => {
    recommendType.value = res.data;
  });
};
getHotwordinfoList();
//重置
const reset = (): void => {
  pageSet.value = {
    pageNo: 1,
    pageSize: 20,
    total: 0
  };
  loadPagination(true);
};
const tableData = ref<Array<object>>([]);
const columns = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "产品名称",
    dataIndex: "productName",
    align: "center",
    width: 220
  },
  {
    title: "产品图片",
    dataIndex: "productDetailImgDtos",
    align: "center",
    width: 150
  },
  {
    title: "产品编码",
    dataIndex: "productCode",
    align: "center",
    width: 140
  },
  {
    title: "装箱规格",
    dataIndex: "packingSpec",
    align: "center",
    width: 120
  },
  {
    title: "税率%",
    dataIndex: "taxRate",
    align: "center",
    width: 120
  },
  {
    title: "别名",
    dataIndex: "ncName",
    align: "center",
    width: 160
  },
  {
    title: "规格型号",
    dataIndex: "spec",
    align: "center",
    width: 200
  },
  {
    title: "主计量单位",
    dataIndex: "measureUnit",
    align: "center",
    width: 120
  },
  {
    title: "运营位类型",
    dataIndex: "positionConfigIdsName",
    align: "center",
    width: 200
    // customRender: ({text}) => {
    //   let name = "";
    //   recommendType.value.forEach((item) => {
    //     if (item.id == text) {
    //       name = item.name;
    //     }
    //   });
    //   return name;
    // }
  },
  {
    title: "商品分类",
    dataIndex: "productTypeName",
    align: "center",
    width: 180
  },
  {
    title: "商品标签",
    dataIndex: "tagsName",
    align: "center",
    width: 200
  },
  {
    title: "状态",
    dataIndex: "publishStatus",
    align: "center",
    width: 120,
    customRender: ({text}) => {
      return text == 1 ? "上架" : "下架";
    }
  },
  {
    title: "操作",
    dataIndex: "l",
    align: "center",
    width: 140,
    fixed: "right"
  }
]);
//SKU增加删除
const addSku = (flag: boolean, index: number = 0) => {
  if (flag) {
    //新增
    tableDataSku.value.push({sort: tableDataSku.value.length + 1});
  } else {
    //删除
    tableDataSku.value.splice(index, 1);
  }
};
//轮播图数据
const slideshowData = ref<Array<any>>([]);
//详情图数据
const detailPicture = ref<Array<any>>([]);
//调整轮播图图片的位置
const adjustment = (type: number, index: number) => {
  if (type == 1) {
    //向左
    if (index == 0) {
      message.warning("已是第一位!");
    } else {
      let data = JSON.parse(JSON.stringify(slideshowData.value[index]));
      slideshowData.value.splice(index, 1);
      slideshowData.value.splice(index - 1, 0, data);
    }
  } else if (type == 2) {
    //向右
    if (index == slideshowData.value.length - 1) {
      message.warning("已是最后一位!");
    } else {
      let data = JSON.parse(JSON.stringify(slideshowData.value[index]));
      slideshowData.value.splice(index, 1);
      slideshowData.value.splice(index + 1, 0, data);
    }
  } else if (type == 3) {
    //删除
    Modal.confirm({
      title: "提示",
      content: `确定要删除该图片嘛`,
      onOk() {
        slideshowData.value.splice(index, 1);
      }
    });
  }
};
//调整详情图图片的位置
const detailAdjustment = (type: number, index: number) => {
  if (type == 1) {
    //向左
    if (index == 0) {
      message.warning("已是第一位!");
    } else {
      let data = JSON.parse(JSON.stringify(detailPicture.value[index]));
      detailPicture.value.splice(index, 1);
      detailPicture.value.splice(index - 1, 0, data);
    }
  } else if (type == 2) {
    //向右
    if (index == detailPicture.value.length - 1) {
      message.warning("已是最后一位!");
    } else {
      let data = JSON.parse(JSON.stringify(detailPicture.value[index]));
      detailPicture.value.splice(index, 1);
      detailPicture.value.splice(index + 1, 0, data);
    }
  } else if (type == 3) {
    //删除
    Modal.confirm({
      title: "提示",
      content: `确定要删除该图片嘛`,
      onOk() {
        detailPicture.value.splice(index, 1);
      }
    });
  }
};
const tableDataSku = ref<Array<any>>([]);
const columnsSku = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "sort",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    }
  },
  {
    title: "属性名称",
    dataIndex: "paramName",
    align: "center",
    width: 180
  },
  {
    title: "属性值",
    dataIndex: "paramValue",
    align: "center",
    width: 180
  },
  {
    title: "操作",
    dataIndex: "caozuo",
    align: "center",
    width: 50
  }
]);
</script>

<style lang="less" scoped></style>
